import styled from 'styled-components';
import React, { ReactNode, useState } from 'react';

export interface TopHeaderItem {
    label: string;
    key: string;
}

export interface TopHeaderProps {
    leftButton?: ReactNode;
    items: Array<TopHeaderItem>;
    activeKey: string;
    onChange: (key: string) => Promise<void>
}

export const TopHeader: React.FC<TopHeaderProps> = (props) => {

    return (
        <Container data-tauri-drag-region style={{
            paddingLeft: props.leftButton ? '0px' : '20px'
        }}>
            {
                props.leftButton && <ButtonContainer>{props.leftButton}</ButtonContainer>
            }
            {
                props.items && props.items.map((item, index) => {
                    return (
                        <ItemContainer
                            key={index}
                            style={props.activeKey === item.key ? {
                                color: '#0091FF',
                                fontWeight: '900',
                                fontSize: '16px',
                            } : {

                            }}
                            onClick={async () => {
                                props.onChange(item.key);
                            }}>
                            {item.label}
                        </ItemContainer>
                    );
                })
            }

        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 0px;
    padding-right:20px;
`;

const ButtonContainer = styled.div`
    width: 40px;
    min-height: 40px;
    height: 100%;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
`;

const ItemContainer = styled.div`
    min-width: 90px;
    font-size: 14px;
    display: flex;
    cursor: pointer;
`;
